[#ftl]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>[#if title != '']${title}[/#if] | ${rc.getMessage("webapp.name")}</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<meta http-equiv="Cache-Control" content="no-store"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Expires" content="0"/>
    <script type="text/javascript">
		var ctx = '${rc.contextPath}';
	</script>
    <script type="text/javascript" src="${base}/scripts/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="${base}/scripts/jquery.ui.core.min.js"></script>
    <script type="text/javascript" src="${base}/scripts/jquery.ui.calendar.min.js"></script>
	<script type="text/javascript" src="${base}/scripts/jquery.form.js"></script>
	<script type="text/javascript" src="${base}/scripts/jquery.fancybox-1.3.1.js"></script>	
    <script type="text/javascript" src="${base}/scripts/jquery.corner.js"></script>
    <script type="text/javascript" src="${base}/scripts/DD_roundies_0.0.2a-min.js"></script>
    <script type="text/javascript" src="${base}/scripts/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
    <script type="text/javascript" src="${base}/scripts/common.js"></script>
    <script type="text/javascript" src="${base}/scripts/jquery.jlembed.js"></script>
    <script type="text/javascript" src="${base}/scripts/jquery.lightweight.blockUI.js"></script>
    <script type="text/javascript" src="${base}/dwr/interface/UserManagerExt.js"></script>
    <script type="text/javascript" src="${rc.contextPath}/dwr/engine.js"></script>    
	<script type="text/javascript" src="${rc.contextPath}/dwr/util.js"></script> 
            
    <link href="${base}/styles/fancybox/jquery.fancybox-1.3.1.css" type="text/css" rel="stylesheet">
    <link href="${base}/styles/igoal-calendar/jquery-ui-1.8.6.igoal-calendar.css" type="text/css" rel="stylesheet">
    
    <style>        
        .login { font-family:Arial; padding: 0 46px 15px; }
            .login h3{ font-size:18px; color:#FF6600; margin-bottom:8px; margin-top:18px; }
                .login input { display: block;}
                    .login .inputText { background-color:#FCFCFC; border:1px solid #E5E5E5; line-height:26px; font-size:13px; color:#3c3c3c; width:249px; height:25px; margin-top:3px; margin-bottom:10px; }
                        .login .inputButton { background-color:#333333; font-size:14px; font-weight: bold; color:#fff; border: none; padding:5px 15px; font-family:Arial; float: left; }
                    .login label { font-size:12px; font-weight:bold; color:#333333; }
                        .login label a { font-size:11px; font-weight: normal; color:#333; text-decoration: none;}
                    .rg { font-size:14px; font-weight: bold; color:#333;  margin-top:6px; float:left; margin-left:20px; }
        .reg { font-family:Arial; padding: 0 46px 15px; }
            .reg h3{ font-size:18px; color:#FF6600; margin-bottom:8px; margin-top:18px; }               
                    .reg .inputText { background-color:#FCFCFC; border:1px solid #E5E5E5; line-height:26px; font-size:13px; color:#3c3c3c; width:185px; height:25px; margin-top:3px; margin-bottom:10px; }
                        .reg .inputButton { background-color:#333333; font-size:14px; font-weight: bold; color:#fff; border: none; padding:5px 23px; font-family:Arial; float:left;  }
                    .reg label { font-size:12px; font-weight:bold; color:#333333; }
                        .reg label a { font-size:11px; font-weight: normal; color:#333; text-decoration: none;}
                    .rg { font-size:14px; font-weight: bold; color:#333; float:left; margin-top:6px;  margin-left:20px;}
    </style>
    
    <script>
        /* IE only */
        DD_roundies.addRule('.btn_next', '15px');
        DD_roundies.addRule('.nav', '0 15px 15px 0');

        jQuery(document).ready(function() {
	        jQuery("#btn_login").fancybox({
	            'transitionIn': 'elastic',
	            'overlayColor': '#000',
	            'overlayOpacity': 0.4,
	            'scrolling'   : 'no'         
	        });
	       
	        jQuery("#btn_register").fancybox({
	        	'onStart': clearRegForm,
	            'transitionIn': 'elastic',
	            'overlayColor': '#000',
	            'overlayOpacity': 0.4,
	            'scrolling'   : 'no'       
	        });
	
	        jQuery(".login .rg").fancybox({
	            'transitionIn': 'elastic',
	            'overlayColor': '#000',
	            'overlayOpacity': 0.4,
	            'scrolling'   : 'no'       
	        });
	        
	        jQuery("#reg_bd").datepicker({
				changeMonth: true,
				changeYear: true,
				dateFormat: 'dd/mm/yy',
				defaultDate: '01/01/1990',
				monthNamesShort: ['01','02','03','04','05','06','07','08','09','10','11','12'],
				yearRange: '1950:2005'
			});
        });
        
        function clearRegForm() {
        	jQuery(".reg_error").hide();
        }
        
        function login(username, password) {
        	jQuery(".loader").show();
        	jQuery.ajax({
				type: "POST",
				url: ctx + "/j_spring_security_check",
				data: {
					j_username : username,
					j_password : password
				},
				error: function(data){
					alert("Đăng nhập không thành công!");
					if(typeof loginFailed == 'function'){
						loginFailed();
					}
				},
				success: function(data){										
					if(typeof afterLoggedIn == 'function'){
						afterLoggedIn();
					} 
					
					jQuery.fancybox.close();
				}
			});			
        }
        
        function checkLogin() {
        	username = jQuery("#login_un").val();
        	password = jQuery("#login_pw").val();
        	
        	UserManagerExt.login(username, password, {
        		callback: function(result) {
        			if (result != null) {
			        	login(username, password);
        			} else {
        				alert('Đăng nhập không thành công!');
        			}
        		},
        		errorHandler : function(errorString, exception) {
					alert('Đăng nhập không thành công!');
				}
        	});
        }
        
        function register() {
        	jQuery(".loader").show();
        	if (validateReg()) {
        		bds = jQuery("#reg_bd").val();
    			bd = jQuery.datepicker.parseDate("dd/mm/yy", bds);
				user = {
					username : jQuery("#reg_un").val(),
					email : jQuery("#reg_mail").val(),
					password : jQuery("#reg_pw").val(),
					day : bd.getDate(),
					month : bd.getMonth() + 1,
					year : bd.getYear()
				}
				UserManagerExt.register(user, {
					callback : function(result) {
						if (result > 0){
							login(user.username, user.password);
						} else {
							alert("Đăng ký không thành công");
						}
					},
					errorHandler : function(errorString, exception) {
						alert("Có lỗi phát sinh trong quá trình đăng ký");
					}
				});
			}
		}
		
		var unCheck = true;
		var mailCheck = true;
		var pwCheck = true;
		var bdCheck = true;
		
		function validateReg() {
			jQuery(".reg_error").hide();
			
			// check username
			unCheck = true;
			un = jQuery.trim(jQuery("#reg_un").val());
        	if (un.length < 5) {
        		unCheck = false;
        		jQuery("#reg_err_un").attr("title", "Tài khoản phải có ít nhất 5 ký tự").show();
        	} else {
	        	UserManagerExt.validateUsername(un, {
					callback : function(result) {
						if (result != '0') {
							unCheck = false;
							jQuery("#reg_err_un").attr("title", "Tài khoản này đã được sử dụng").show();
						}
					}
				});
			}
			
			// check email
			mailCheck = true;
			mail = jQuery.trim(jQuery("#reg_mail").val());
			if (!isValidEmail(mail)) {
				mailCheck = false;
				jQuery("#reg_err_mail").attr("title", "Email không hợp lệ").show();
			} else {
	        	UserManagerExt.validateEmail(mail, {
					callback : function(result) {
						if (result != '0') {
							mailCheck = false;
							jQuery("#reg_err_mail").attr("title", "Email này đã được sử dụng").show();
						}
					}
				});
			}
			
			pwCheck = true;
			pw = jQuery.trim(jQuery("#reg_pw").val());
			pw2 = jQuery.trim(jQuery("#reg_pw2").val());
			if (pw.length < 6) {
				pwCheck = false;
				jQuery("#reg_err_pw").attr("title", "Mật khẩu phải có ít nhất 6 ký tự").show();
			} else if (pw != pw2){
				pwCheck = false;
				jQuery("#reg_err_pw2").attr("title", "Mật khẩu không khớp.").show();
			}
			
			bdCheck = true;
			bd = jQuery.trim(jQuery("#reg_bd").val());
			if (bd == "") {
				bdCheck = false;
				jQuery("#reg_err_bd").attr("title", "Hãy nhập ngày sinh của bạn").show();
			}
			// TODO synchronize problem ??
			return jQuery(".reg_error:not(:hidden)").length == 0;
		}
		
		function isValidEmail(strEmail) {
			var filter = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i
			if (filter.test(strEmail))
				return true;
			return false;
		}
    
    </script>
	${head}	
</head>
<body>
	${body}
	<script type="text/javascript">
  		var _gaq = _gaq || [];
  		_gaq.push(['_setAccount', 'UA-19209368-3']);
  		_gaq.push(['_trackPageview']);

		(function() {
    		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 		})();
	</script>
	<div style="display:none">
		<div id="login_dialog" class="login">
	        <h3>
	            Đăng nhập</h3>
	        <label>Tài khoản:</label>
	        <input class="inputText" type="text" id="login_un"/>
	        <label>Mật khẩu:&nbsp;&nbsp;<a href="">[?] Quên mật khẩu</a></label>
	        <input class="inputText" type="password" id="login_pw"/>
	        
	        <input class="inputButton" type="button" value="Đăng nhập" onclick="checkLogin()"/>  
	        <a href="#register_dialog" class="rg">[ Đăng ký ]</a>      
	        <div style="clear:both"></div>
	    </div>
    </div>
    
	<div style="display:none">
		<div id="register_dialog" class="reg">
	        <h3>Đăng ký tài khoản</h3>
	        <label>Tài khoản: <span class="reg_error" id="reg_err_un" style="color:red; display: none;">(Tài khoản này không hợp lệ)</span></label>
	        <input id="reg_un" class="inputText" style="display:block;" type="text" />
	        
	        
	        <div style="float: left; padding-right: 10px;">
	            <label>Mật khẩu: <span class="reg_error" id="reg_err_pw" style="color:red; display: none;">(Tối thiểu 6 ký tự)</span></label>
	            <input id="reg_pw" class="inputText" type="password" style="display: block;" />
	        </div>
	        <div style="float: left;">
	            <label>Nhập lại mật khẩu: <span class="reg_error" id="reg_err_pw2" style="color:red; display: none;">(Mật khẩu xác nhận không đúng)</span></label>
	            <input id="reg_pw2" class="inputText" type="password" style="display: block;" />
	        </div>
	        <div style="clear: both;"></div>
	        <label>Email: <span class="reg_error" id="reg_err_mail" style="color:red; display: none;">(Email không hợp lệ)</span></label>
	        <input id="reg_mail" class="inputText" type="text" style="display: block; width:380px;" />
	        
	        <label style="display: block;">Ngày sinh: <span class="reg_error" id="reg_err_bd" style="color:red; display: none;">(Hãy chọn ngày sinh)</span></label>
	        <input id="reg_bd" class="inputText" type="text" style="width:185px;" readonly="readonly"/>
	        <!--input id="reg_bm" class="inputText" style="margin:0 10px 10px; width:46px;" type="text" />
	        <input id="reg_by" class="inputText" type="text" style="width:97px;" /-->
	        
	        <div style="clear: both;"></div>
	        
	        <input class="inputButton" type="button" value="Đăng ký" onclick="register()"/>
	        <a href="" class="rg">[ Hủy ]</a>
	        <div style="clear: both;"></div>
	    </div>
    </div>
    
    <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-19209368-3']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</body>
</html>